import React from 'react';
import { DecompositionTreeGraph } from '@ant-design/graphs';

const DemoDecompositionTreeGraph = () => {
  const data = {
    id: 'A0',
    value: {
      title: 'H5-2218',
      items: [
        {
          text: '1000万',
        },
      ],
    },
    children: [
      {
        id: 'A1',
        value: {
          title: '北京',
          items: [
            {
              text: '200万',
            },
            {
              text: '占比',
              value: '20%',
            },
          ],
        },
        children: [
          {
            id: 'A11',
            value: {
              title: '海淀',
              items: [
                {
                  text: '100万',
                },
                {
                  text: '占比',
                  value: '50%',
                },
              ],
            },
          },
          {
            id: 'A12',
            value: {
              title: '朝阳',
              items: [
                {
                  text: '50万',
                },
                {
                  text: '占比',
                  value: '25%',
                },
              ],
            },
          },
          {
            id: 'A13',
            value: {
              title: '昌平',
              items: [
                {
                  text: '50万',
                },
                {
                  text: '占比',
                  value: '25%',
                },
              ],
            },
          },
        ],
      },
      {
        id: 'A2',
        value: {
          title: '上海',
          items: [
            {
              text: '500万',
            },
            {
              text: '占比',
              value: '50%',
              icon: 'https://gw.alipayobjects.com/zos/antfincdn/iFh9X011qd/7797962c-04b6-4d67-9143-e9d05f9778bf.png',
            },
          ],
        },
        children: [
          {
            id: 'A21',
            value: {
              title: '浦东新区',
              items: [
                {
                  text: '200万',
                },
                {
                  text: '占比',
                  value: '40%',
                },
              ],
            },
            children: [
              {
                id: 'A211',
            value: {
              title: '浦东新区北部',
              items: [
                {
                  text: '100万',
                },
                {
                  text: '占比',
                  value: '50%',
                },
              ],
            },
              },
              {
                id: 'A212',
            value: {
              title: '浦东新区南部',
              items: [
                {
                  text: '100万',
                },
                {
                  text: '占比',
                  value: '50%',
                },
              ],
            },
              }
            ]

          },
          {
            id: 'A22',
            value: {
              title: '闵行区',
              items: [
                {
                  text: '300万',
                },
                {
                  text: '占比',
                  value: '60%',
                },
              ],
            },

          }
        ]
      },
    ],
  };

  const config = {
    data,
    markerCfg: (cfg) => {
      const { children } = cfg;
      return {
        show: children?.length,
      };
    },
    behaviors: ['drag-canvas', 'zoom-canvas', 'drag-node'],
    onReady: (graph) => {
      graph.on('node:click', (evt) => {
        console.log(evt);
      });
    }
  };

  return <DecompositionTreeGraph {...config} />;
};

export default DemoDecompositionTreeGraph
